<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>放大镜效果</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}

			#demo {
				display: block;
				width: 360px;
				height: 360px;
				margin: 50px;
				position: relative;
				border: 1px solid #ccc;
			}

			#float-box {
				position: relative;
				z-index: 1;
			}

			#small-box {
				display: none;
				width: 160px;
				height: 120px;
				position: absolute;
				background: #ffffcc;
				border: 1px solid #ccc;
				filter: alpha(opacity=50);
				opacity: 0.5;/* 透明度 */‘
				cursor: move;/* 该元素在边界范围内可移动 */
			}

			#big-box {
				display: none;
				position: absolute;
				top: 0;
				left: 460px;
				width: 400px;
				height: 300px;
				overflow: hidden;
				border: 1px solid #ccc;
				z-index: 1;

			}

			#big-box img {
				position: absolute;
				z-index: 5;
			}
		</style>
	</head>
	<body>
		<div id="demo">
			<div id="float-box">
				<div id="small-box"></div>
				<img src="img/1.jpg">
			</div>
			<div id="big-box">
				<img src="img/1.1.jpg">
			</div>
		</div>
		<script type="text/javascript">
			window.onload = function() {

				//获取到需要的元素
				var demo = document.getElementById('demo');
				var smallBbox = document.getElementById('small-box');
				var floatBox = document.getElementById('float-box');
				var bigBox = document.getElementById('big-box');
				var bigBoxImg = bigBox.getElementsByTagName('img')[0];


				floatBox.onmouseover = function() {
					smallBbox.style.display = "block";
					bigBox.style.display = "block";
				}
				floatBox.onmouseout = function() {
					smallBbox.style.display = "none";
					bigBox.style.display = "none";
				}
				floatBox.onmousemove = function(e) {
					var _event = e || event;
					console.log(_event.clientY);
					var l = _event.clientX - demo.offsetLeft - floatBox.offsetLeft - smallBbox.offsetWidth / 2; //除2是因为让鼠标点出现在放大遮罩的中心位置
					var t = _event.clientY - demo.offsetTop - floatBox.offsetTop - smallBbox.offsetHeight / 2;

					var demoWidth = demo.offsetWidth;
					var demoHeight = demo.offsetHeight;


					var smallBboxWidth = smallBbox.offsetWidth;
					var smallBboxHeight = smallBbox.offsetHeight;
					//鼠标可以移动的最大XY的距离
					var maxX = demoWidth - smallBboxWidth;
					var maxY = demoHeight - smallBboxHeight;


					l = Math.min(maxX, Math.max(0, l));
					t = Math.min(maxY, Math.max(0, t));
					smallBbox.style.left = l + "px";
					smallBbox.style.top = t + "px";


					var percentX = l / (floatBox.offsetWidth - smallBboxWidth); //求出小图遮罩的坐标占可移动区域的比例
					var percentY = t / (floatBox.offsetHeight - smallBboxHeight);


					bigBoxImg.style.left = -percentX * (bigBoxImg.offsetWidth - bigBox.offsetWidth) + "px"; //大图对的移动方向和小图遮罩的移动方向相反
					bigBoxImg.style.top = -percentY * (bigBoxImg.offsetHeight - bigBox.offsetHeight) + "px";

				}
			}
		</script>
	</body>
</html>
